<template>
  <div class="template2">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">交易订单
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="orderNo">
            <el-input size="mini" style="width:180px;" v-model="formInline.orderNo" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item prop="status">
            <el-select size="mini" style="width:100px;" v-model="formInline.status" placeholder="订单状态">
              <el-option label="不限" value="2"></el-option>
              <el-option label="交易成功" value="1"></el-option>
              <el-option label="交易关闭" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="entryTime">
            <el-date-picker size="mini" style="width:200px;" clearable v-model="formInline.entryTime" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期"  end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
        <financeList></financeList>
      </el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" :current-page="formInline.page" @size-change="sizeChange" @current-change="page" :total="listNum" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script> 
import financeList from "./financeList.vue"
export default {
  data() {
    return {
      height: 0,
      formInline: {
        orderNo: "",
        status: "",
        size:20,
        page:1,
        entryTime:''
      },
      listNum:10
    };
  },
  created() {
    this.$root.$on("finance",data=>{
      this.listNum=data
    })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let obj=this.formInline
      obj.page=1
      let data=this.format()
      this.$root.$emit('financeList',data)
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    page(e){ //页码
      let obj=this.formInline
      obj.page=e
      let data=this.format()
      this.$root.$emit('financeList',data)
    },
    sizeChange(e){ //每页数量
      let obj=this.formInline
      obj.page=1
      obj.size=e
      let data=this.format()
      this.$root.$emit('financeList',data)
    },
    format(){ //转换请求格式数据
      let obj=this.formInline
      let data={
        orderNo: obj.orderNo,
        status: obj.status==2?'':obj.status,
        size:obj.size,
        page:obj.page,
      }
      if(obj.entryTime[0] && obj.entryTime[1]){
        data.startDate=obj.entryTime[0]
        data.endDate=obj.entryTime[1]
      }else{
        data.startDate=''
        data.endDate=''
      }
      return data
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    let headH = document.getElementById("head1").offsetHeight;
    let footH = document.getElementById("foot").offsetHeight;
    this.height = parseInt(height) - (headH + footH+62);
  },
  components:{
    financeList
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>
<style lang="less" scoped>

</style>